<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="注册"
        @click-left="$router.go(-1)"
        left-arrow
      ></van-nav-bar>
    </header>
    <div class="content">
      <van-form validate-first @failed="onFailed">
        <van-field
          v-model="tel"
          name="tel"
          clearable
          placeholder="请输入手机号码"
          :rules="[{ required: true, pattern: pattern1, message: '请输入正确的手机号码' }]"
        />
        <van-field
          v-model="password"
          name="password"
          clearable
          placeholder="请输入密码"
          :rules="[{ required: true, pattern: pattern2, message: '密码长度不能少于6位' }]"
        />
        <div style="margin: 16px;">
          <van-button round block  color="#f66" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Button, NavBar, Form, Field } from 'vant'
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
export default {
  data () {
    return {
      tel: '15184422134',
      password: '6666666',
      pattern1: /^1[3456789]\d{9}$/,
      pattern2: /\d{6}/
    }
  },
  methods: {
    onFailed (errorInfo) {
      console.log('errorInfo', errorInfo)
    }
  }
}
</script>